<template>
  <div class="">
    <public-dialog :title="titleName" width="30%" dialogCenter :visible="visible" @update:visible="onVisibleChange"
      @onConfirm="confirmHandler">
      <el-form :model="formInline" :rules="formRules" label-width="150" ref="formRef" @submit.native.prevent>
        <el-form-item label="商品和服务分类简称" prop="abbrName">
          <el-input v-model="formInline.abbrName" placeholder="请输入商品和服务分类简称" clearable style="width: 100%;" />
        </el-form-item>
        <el-form-item label="货物和劳务名称" prop="serviceName">
          <el-input v-model="formInline.serviceName" placeholder="请输入货物和劳务名称" clearable style="width: 100%;" />
        </el-form-item>
        <el-form-item label="税收分类编码" prop="code">
          <el-input v-model="formInline.code" placeholder="请输入税收分类编码" clearable style="width: 100%;" />
        </el-form-item>
        <el-form-item label="使用部门" prop="departmentIds">
          <el-select v-model="formInline.departmentIds" multiple collapse-tags placeholder="请选择使用部门" clearable
            style="width: 100%;">
            <el-option v-for="item in options" :label="item.deptName" :value="item.deptId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="说明" prop="describe">
          <el-input v-model="formInline.describe" placeholder="请输入说明" clearable style="width: 100%;" />
        </el-form-item>
        <el-form-item label="增值税税率" prop="taxRate">
          <el-input v-model="formInline.taxRate" placeholder="请输入增值税税率" clearable style="width: 100%;"
            @input="formInline.taxRate = limitInputNum(formInline.taxRate, 9, 2, true)">
            <template #append>%</template>
          </el-input>
        </el-form-item>
        <el-form-item label="增值税特殊管理" prop="taxManage">
          <el-input v-model="formInline.taxManage" placeholder="请输入增值税特殊管理" clearable style="width: 100%;" />
        </el-form-item>
      </el-form>
    </public-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, nextTick } from "vue";
import PublicDialog from "@/components/PublicDialog.vue";
import { ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElNotification } from "element-plus";
import { invoiceInfoApi, fundManagementApi } from "@/api/businessFinance.js";
import { limitInputNum } from "@/common/utils/GlobalUtils.js";
import { debounce } from "lodash";

let titleName = ref("");
let visible = ref(false);

let formInline = reactive({});
let options = ref([]);
let formRules = reactive({
  abbrName: [{ required: true, message: "请输入商品和服务分类简称", trigger: "blur" }],
  serviceName: [{ required: true, message: "请输入货物和劳务名称", trigger: "blur" }],
  code: [{ required: true, message: "请输入税收分类编码", trigger: "blur" }],
  departmentIds: [{ required: true, message: "请选择使用部门", trigger: "blur" }],
});
let formRef = ref(null);

let onVisibleChange = (booleanValue) => {
  if (!booleanValue) {
    formRef.value.resetFields();
  }
  visible.value = booleanValue;
};

let emits = defineEmits(["success"]);
let _debounce = debounce(async () => {
  if (titleName.value === "新增分类") {
    let params = { ...formInline };
    params.departmentIds = params.departmentIds.join(",");
    let res = await invoiceInfoApi.addCate(params);
    if (res.code === "200") {
      ElNotification.success("新增成功");
      emits("success");
      visible.value = false;
    }
  } else {
    let params = { ...formInline };
    params.departmentIds = params.departmentIds.join(",");
    let res = await invoiceInfoApi.updateCate(params);
    if (res.code === "200") {
      ElNotification.success("修改成功");
      emits("success");
      visible.value = false;
    }
  }
}, 500, { leading: true, trailing: false });
let confirmHandler = () => {
  formRef.value.validate(async valid => {
    if (valid) {
      _debounce();
    }
  })
};

let getDepartments = async () => {
  let res = await fundManagementApi.getDepartmentVo();
  if (res.data) {
    options.value = res.data || [];
  }
};

let openHandler = async (title, row) => {
  titleName.value = title;
  getDepartments();
  visible.value = true;
  if (row) {
    let res = await invoiceInfoApi.getInfo({
      typeId: row.typeId
    })
    if (res.data) {
      nextTick(() => {
        for (let key in res.data) {
          if (key === "departmentIds") {
            formInline[key] = res.data[key].split(",");
          } else {
            formInline[key] = res.data[key];
          }
        }
      });
    }
  }
};

defineExpose({
  openHandler
});
</script>
<style lang="scss" scoped>
</style>
